<template>
    <div>
        <div class="my-input" :class="{
            'pl-2 pr-2': props.label,
            'pb-[10px]': props.label && props.mode == 'view',
            'pt-4': props.label && props.mode == 'view'
        }">
            <!-- 標題 -->
            <div :class="{
                'mb-4': props.mode != 'view',
                'mb-1': props.mode == 'view'
            }" class="flex" v-if="props.label" :style="{ opacity: props.label == '#' ? 0 : 1 }">
                <div class="text-error text-[14px] leading-[14px]"
                    v-if="props.required == true && props.mode != 'view'">*</div>
                <div class="text-text--primary text-[14px] leading-[14px] font-[500]">{{ $t(props.label) }}</div>
            </div>
            <div class="relative">
                <!-- 编辑模式 -->
                <v-text-field v-if="props.mode != 'view'" :error-messages="props.errorMessages" v-model="value"
                    color="primary" label="" variant="outlined" :placeholder="props.placeholder"
                    :clearable="props.clearable" :hint="props.hint" :rules="props.rules" :readonly="props.readonly"
                    :disabled="props.disabled"></v-text-field>
                <!-- 查看模式 -->
                <div class="pt-[5px] pb-[5px] text-text--primary font-[400] text-[14px] leading-[24px] min-h-[36px]"
                    v-if="props.mode == 'view'">{{ value }}</div>
                <!-- 新提示 -->
                <mrc_ess_InputBottomTip :tip="props.tip" :tipDetail="props.tipDetail"></mrc_ess_InputBottomTip>
            </div>
        </div>
        <!-- 分割线 -->
        <v-divider v-if="props.mode == 'view'"></v-divider>
        <!-- 间距 -->
        <div class="pointer-events-none" v-if="props.mode != 'view' || props.spacing == true" :style="{
            height: props.spacingHeight + 'px'
        }"></div>
    </div>
</template>

<script lang="ts" setup>
import { watch } from "vue";
const props = defineProps({
    mode: {
        type: String,
        default: "edit"
    },
    spacing: {
        type: Boolean,
        default: false
    },
    spacingHeight: {
        type: [String, Number],
        default: 32
    },
    label: {
        type: String,
        default: ""
    },
    required: {
        type: Boolean,
        default: false
    },
    placeholder: {
        type: String,
        default: ""
    },
    clearable: {
        type: Boolean,
        default: false
    },
    hint: {
        type: String,
        default: ""
    },
    rules: {
        type: Object,
        default: []
    },
    readonly: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    errorMessages: {
        type: String,
        default: ""
    },
    tip: {
        type: String,
        default: ""
    },
    tipDetail: {
        type: String,
        default: ""
    }
})
const value = defineModel<any>({
    type: String,
    default: ""
});
watch(value, () => {
    if (typeof (value.value) != "string") {
        try {
            value.value = value.value.toString();
        } catch (err) {
            value.value = "";
        }
    }
})
</script>

<style scoped>
.my-input :deep(.v-field__input) {
    height: 34px;
    min-height: auto;
    font-size: 14px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 12px;
    padding-right: 12px;
}

.my-input :deep(.v-input) {
    box-shadow: 0px 1px 2px 0px #0000000D;
}

.my-input :deep(.v-input__details) {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -18px;
    pointer-events: none;
    padding-left: 0;
    padding-top: 0;
    font-size: 14px;
    line-height: 18px;
}

.my-input :deep(.v-field__outline) {
    color: #B1B2B5;
}
</style>